<template>
  <div class="employee-container">
    <!-- 左边栏 -->
    <div class="left">
      <!-- 搜索框 -->
      <div class="l-search">
        <el-input
          v-model="form.keyword"
          prefix-icon="el-icon-search"
          placeholder="请输入内容"
          @input="keywordChange"
        />
      </div>
      <!-- 树形栏 -->
      <div class="l-tree">
        <el-tree
          ref="treeRef"
          :data="data"
          :props="defaultProps"
          default-expand-all
          highlight-current
          node-key="id"
          @current-change="currentChange"
        />
      </div>
    </div>
    <!-- 右边栏 -->
    <div class="right">
      <!-- 按钮 -->
      <el-row type="flex" justify="end" style="margin-bottom: 10px;">
        <el-button type="primary" @click="addEmployee">添加员工</el-button>
        <el-button type="success" @click="importExcel">excel导入</el-button>
        <el-button type="info" @click="exportExcel">excel导出</el-button>
      </el-row>
      <!-- 表格 -->
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="staffPhoto"
            label="头像"
            width="100"
          >
            <template v-slot="{row}">
              <el-avatar v-if="row.staffPhoto" :size="60" :src="row.staffPhoto" align="center" />
              <div v-else class="avatartx">
                {{ row.username?.charAt(0) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
          />
          <el-table-column
            prop="mobile"
            label="手机号"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
          />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
          >
            <template v-slot="{row}">
              <span>{{ row.formOfEmployment? '正式':'非正式' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
          />
          <el-table-column
            prop="timeOfEntry"
            label="入职时间"
          />
          <el-table-column
            prop="timeOfEntry"
            label="操作"
            width="180"
          >
            <template v-slot="{ row }">
              <el-button type="text" size="small" @click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="confirm(row.id)"
              >
                <el-button slot="reference" type="text" size="small">删除</el-button>
              </el-popconfirm>
            </template>

          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          layout="total,prev, pager, next"
          :total="total"
          :current-page="form.page"
          :page-size="form.pagesize"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </div>
    <!-- excel导入弹窗 -->
    <importExcel :show-excel-dialog.sync="showExcel" @upload-succes="getEmployeeList" />
  </div>
</template>

<script>
import { departmentRequest, transformListToTree } from '@/api/department'
import { getEmployeeListRequest, userExcelExportRequest, deleteUserExcelRequest } from '@/api/employee'
import { debounce } from 'lodash'
import FileSaver from 'file-saver'
import importExcel from '@/views/employee/components/importExcel.vue'
export default {
  name: 'Employee',
  components: {
    importExcel
  },
  data() {
    return {
      form: {
        page: 1, //	当前页码数
        pagesize: 10, // 当前页面需要的数据条数
        keyword: '', // 根据名字模糊查询
        departmentId: null// 部门id,根据部门查询当前部门及子部门的用户
      },
      total: 0, // 页码总数
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData: [],
      showExcel: false
    }
  },
  created() {
    this.companyDepartment()
    this.keywordChange = debounce(this.keywordChange, 1000)
  },
  methods: {
    // 部门信息列表
    async companyDepartment() {
      const res = await departmentRequest()
      // console.log(res)
      // 获取树形所有数据
      this.data = transformListToTree(res.data, 0)
      this.form.departmentId = this.data[0].id
      // 获取树形组件的所有数据后,.将第一个显示为高亮
      this.$nextTick(() => {
        // console.log(11, this.$refs.treeRef)
        // this.$refs.treeRef.setCurrentKey(1)
        this.$refs.treeRef.setCurrentKey(this.form.departmentId)
        this.getEmployeeList()
      })
    },
    // 获取部门信息列表
    async getEmployeeList() {
      const res1 = await getEmployeeListRequest(this.form)
      console.log(res1)
      this.tableData = res1.data.rows
      this.total = res1.data.total
    },
    // 当前选中节点变化时触发的事件
    // 树状图事件,点击当前树状图,获取当前节点信息内容
    currentChange(node) {
      console.log(node)
      this.form.page = 1
      this.form.departmentId = node.id
      this.getEmployeeList()
    },
    // 当前页改变时触发的事件
    handleCurrentChange(val) {
      // console.log(val)
      this.form.page = val
      this.getEmployeeList()
    },
    // 监听输入框文字改变,发送请求
    keywordChange(val) {
      console.log(val)
      this.getEmployeeList()
    },
    // 导入Excel
    importExcel() {
      this.showExcel = true
    },
    // 导出Excel //使用安装file-saver包，实现下载Blob文件解析二进制
    async exportExcel() {
      const res = await userExcelExportRequest()
      console.log(res)
      FileSaver.saveAs(res, '员工信息表.xlsx')
    },
    // 删除员工
    async confirm(id) {
      await deleteUserExcelRequest(id)
      this.$message.success({ message: '删除成功' })
      this.getEmployeeList()
    },
    // 添加员工
    addEmployee() {
      this.$router.push('/employee/detail')
    }

  }
}
</script>

<style lang="scss" scoped>
.employee-container {
  min-height: 50vh;
  display: flex;
  margin: 20px;
  .left {
    padding: 20px;
    flex: 0 0 300px;
    width: 500px;
    background-color: rgb(40, 189, 239);
    border-right: 1px #e3dbdb solid;
  }
  .right {
    padding: 20px;
    // 1 1 0%
    // flex 默认的属性 0 1 auto
    flex: 1;
    background-color: rgb(122, 255, 137);
    .avatartx{
      width: 60px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      background-color: aquamarine;
      border-radius: 50%;
      margin: 0 auto;
    }
  //  :v-deep el-table-column{
  //     text-align: center;
  //   }
  }
}
</style>
